<template>
  <footer class="footer-nav">
    <nav>
      <router-link to="/home" active-class="active">
        <img src="../../assets/images/home.png" />
        <img src="../../assets/images/home-active.png" class="active" />
        首页
      </router-link>
      <router-link to="/classify" active-class="active">
        <img src="../../assets/images/classify.png" />
        <img src="../../assets/images/classify-active.png" class="active" />
        分类
      </router-link>
      <router-link to="/car" active-class="active">
        <img src="../../assets/images/car.png" />
        <img src="../../assets/images/car-active.png" class="active" />
        购物车
      </router-link>
      <router-link to="/my" active-class="active">
        <img src="../../assets/images/my.png" />
        <img src="../../assets/images/my-active.png" class="active" />
        我的
      </router-link>
    </nav>
  </footer>
</template>

<script>
export default {
  name: 'FooterNav'
}
</script>

<style lang="scss" scoped>
.footer-nav {
  @include wh(100%, auto);
  @include border1px(top);
  position: fixed;
  bottom: 0;
  background: #fff;
  nav {
    @include wh(100%, auto);
    @include flex(row, center, center);
    a {
      @include flex(column, center, center);
      color: $text-default-color;
      font-size: $font-size-s;
      text-align: center;
      flex: 1;
      width: 0;
      padding: 10px 0;
      img {
        @include wh(52px, 52px);
        display: block;
        &.active {
          display: none;
        }
      }
      &.active {
        color: $base-color;
        img {
          display: none;
          &.active {
            display: block;
          }
        }
      }
    }
  }
}
</style>
